import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Breadcrumb, Layout, Menu } from 'antd';
import React, { useState } from 'react';
import {Outlet,NavLink} from "react-router-dom"
import {userChildren,adminChildren} from "../../router/index"
import Islogin from '../../utils/Islogin';
const { Header, Content, Footer, Sider } = Layout;



const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  let children = window.localStorage.getItem("user") === "admin" ? adminChildren : userChildren
  console.log(children,"zujian");
  function renderRoute (children) {
    let data = [] 
    children.forEach((item,index)=>{
        data.push({
          key:Math.random(),
          label:<NavLink to={item.path}>{item.tit}</NavLink>,
          children:item.children ? renderRoute(item.children):""
        })
    })
    return data

  }
  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="logo" />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={renderRoute(children)} />
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background"
          style={{
            padding: 0,
          }}
        >
          <span style={{color:"white"}}>
            {
              localStorage.getItem("user") || "user"
            }
          </span>
         
         </Header> 
        <Content
          style={{
            margin: '0 16px',
          }}
        >
        
          <div
            className="site-layout-background"
            style={{
              padding: 24,
              minHeight: 360,
            }}
          >
           <Outlet></Outlet>
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};
export default Islogin(App);